<template>
	<view class="content" style="background-color: #fff;">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' :title="status==2?'商家入驻':status==0?'入驻中':status==1?'已入驻':status=='-1'?'拒绝入驻':''"
			:autoBack="true">
		</u-navbar>

		<view class="container">
			<view class="li">
				<view class="flex" style="width: 50%;">
					<text>商户名称(日文)</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1" v-model="nameJP"
					placeholder="设置商户名" :disabled="status!=2 && status!='-1'"></input>
			</view>
			<view class="li">
				<view class="" style="width: 50%;">
					<text>商户名称(中文)</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1;" v-model="nameZH"
					placeholder="设置商户名":disabled="status!=2 && status!='-1'"></input>
			</view>
			<view class="li">
				<view class="flex" style="width: 50%;">
					<text>账号</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1" v-model="admin"
					placeholder="输入账号" :disabled="status!=2 && status!='-1'"></input>
			</view>  
			<view class="li">
				<view class="flex" style="width: 50%;">
					<text>密码</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1" v-model="passWord" :disabled="status!=2 && status!='-1'" type="password">
			</view>
			<view class="li">
				<view class="flex" style="width: 50%;">
					<text>手机号码</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1" type="number"
					v-model="phone" placeholder="请填写手机号码" :disabled="status!=2 && status!='-1'"></input>
			</view>
			<view class="li">
				<view class="flex" style="width: 50%;">
					<text>邮箱</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
				<input class="fontS32" style="text-align: right; height: 100%;font-weight: 400;flex: 1;" v-model="email"
					placeholder="请填写邮箱号码" :disabled="status!=2 && status!='-1'"></input>
			</view>
			<view class="li" style="border-bottom: none;">
				<view class="flex" style="width: 50%;">
					<text>添加誊本</text>
					<image src="/static/images/mine/Vector.png" mode=""
						style="width: 16rpx;height: 16rpx;margin-top: -30rpx;"></image>
				</view>
			</view>
			<view class="flex " style="flex-wrap: wrap;">
				<view class="relative" v-for="(item,index) in  image " style="margin:0 10rpx 10rpx 0rpx;">
					<view class="absolute" style="top: -15rpx;right: 0;z-index: 9;" @click="del(index)" v-if="status==2 || status==-1">
						<u-icon name="close-circle" :color="$store.state.homeRed" size="30rpx"></u-icon>
					</view>
					<image :src="item"  style="width: 140rpx;height: 140rpx;border-radius: 8rpx;">
					</image>
				</view>
				<view class="iamgbox flexcenter flexRowCenter" @click="upImg" style="margin:0 10rpx 10rpx 0rpx;" v-if="status==2 || status==-1">
					<u-icon name="plus" size="40rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" style="position: absolute;bottom: 0;width:100%; margin;0 4%">
			<u-button :loading="loading" @click="store" class="submit" v-if="status==2 || status=='-1'">{{status==2?'保存':'重新申请'}}</u-button>
			<u-button :loading="loading"  class="submit1" v-else>{{status==0?'入驻中，等待审核':status==1?'已入驻':''}}</u-button>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				status:2,//申请状态 0入驻中 1已入驻- 1拒绝 2待入驻
				loading: false,
				nameZH: '', //商户名
				nameJP: "",
				admin: '', //账号,
				passWord: '', //密码
				phone: '', //手机号码
				email: '', //邮箱
				image: [], //图片
			}
		},
		onLoad() {
			this.$my.post('/index/MerchantJoin/findMerchJoin').then(res=>{
				if(res.code==200 && res.data){
					this.nameZH=res.data.name_zh;
					this.nameJP=res.data.name_jp;
					this.phone=res.data.phone;
					this.admin=res.data.account;
					this.email=res.data.email;
					this.image=res.data.image.split(',')
					this.passWord=res.data.passwd
					this.status=res.data.status
				}
			})
		},
		methods: {
			upImg() {
				let _this=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera '], //手机拍照
					success: (res) => {
						uni.showLoading({
							title:'上传中'
						})
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: this.$my.url + '/index/com/file',
								filePath: item,
								name: 'file',
								header: {
									"Accept-Language": uni.getStorageSync('locale') ?
										uni.getStorageSync('locale') : 'zh',
									'token': uni.getStorageSync('token'),
								},
								formData: {
									"file": tempFilePaths[0],
									use: 'company_photo'
								},
								success: (uploadFileRes) => {
									uni.hideLoading()
									let res = JSON.parse(uploadFileRes.data);
									if (res.code == 200) {
										this.image.push(res.data.file_path)
									} else {
										_this.$my.toast(res.meaasge)
									}
								},fail() {
									uni.hideLoading()
								}
							});
						})
					}
				});
			},
			// 删除图片
			del(index) {
				this.image.splice(index, 1)
			},
			// 添加
			store() {
				this.loading = true
				this.$my.post('/index/MerchantJoin/merchantJoin', {
					name_zh: this.nameZH,
					name_jp: this.nameJP,
					account: this.admin,
					passwd: this.passWord,
					email: this.email,
					phone: this.phone,
					image: this.image,
				}).then(res => {
					this.$my.toast(res.message)
					this.loading=false;
					if (res.code == 200) {
						this.$my.go('', 500)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.iamgbox {
			width: 140rpx;
			height: 140rpx;
			text-align: center;
			display: flex;
			border-radius: 8rpx;
			padding: 32rpx 0;
			background: #F5F5F5;
			box-sizing: border-box;
		}

		// border: 2rpx solid #f5f5f5;
		.container {
			padding: 0 4%;

			>.li {
				height: 100rpx;
				border-bottom: 2rpx solid #f3f3f3;
				line-height: 100rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				font-weight: bold;

				.fw4 {
					font-weight: 400;
				}
			}
		}

		.btn {
			margin-bottom: 40rpx;

			.submit {
				width: 92%;
				background-color: #DD2131;
				border-radius: 45rpx;
				color: white;
			}
			.submit1{
				width: 92%;
				background-color: #ccc !important;
				border-radius: 45rpx;
				color: white;
			}
		}

	}
</style>
